<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-table v-loading="loading" :data="tableData.data" width="900px" size="small" @selection-change="handleSelectionChange"  ref="multipleTable">
        <el-table-column
             type="selection"
             width="55">
           </el-table-column>
        <el-table-column prop="uid" label="ID" min-width="60" />
        <el-table-column prop="account" label="昵称" min-width="130" />
        <el-table-column label="用户头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image class="tabImage" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sex | saxFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分行" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.branch | filterEmpty}}</span>
          </template>
        </el-table-column>

        <el-table-column label="岗位" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.post | filterEmpty}}</span>
          </template>
        </el-table-column>

        <el-table-column label="角色" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.role | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goSendRecordsPage(scope.row)" class="mr10">推送记录</el-button>
               <el-button type="text" size="small" @click="delRecords(scope.row)" class="mr10">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="80%"
        title="推送记录"
        :visible.sync="dialogVisible"
        append-to-body>
        <record-list :uid="uid"></record-list>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import  recordList from  './recordList'
import {getSendUserList} from '@/api/course'
import {deleteRecords} from '@/api/send'
  import {
    userListApi
  } from '@/api/user'
  import {
    listDept
  } from '@/api/dept'
  import {
    getRoleList
  } from '@/api/role'
  import {
    listPost
  } from '@/api/post'
  export default {
    name: 'UserList',
    filters: {
      saxFilter(status) {
        const statusMap = {
          1: '男',
          2: '女'
        }
        return statusMap[status]
      }
    },
    components:{
      recordList
    },
    props:{
     dayId:{
         default:null
     }
    },
    data() {
      return {
        dialogVisible:false,
        templateRadio: 0,
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 10,
          keywords: ''
        },
        deptList: [],
        branchList: [],
        roleList: [],
        cUids: [],
        uid:'',
      }
    },
    mounted() {
      this.getList()
      this.deptLists();
      this.branchLists();
      this.roleLists();
    },
    methods: {
      delRecords(row){
         deleteRecords({
          id: row.recordId
        }).then(res => {
          console.log(res)
          this.getList()
        })
      },
      goSendRecordsPage(row){
        this.dialogVisible=true
          this.uid=row.uid
      },
      handleSelectionChange(val) {
        const tables = []
        val.map((item) => {
          tables.push({ src: item.image,
            id: item.id })
        })
        this.multipleSelection = val
      },

      // 分行
      deptLists() {
        listDept({pageSize: 999}).then(async res => {
          this.deptList = res.list
        })
      },

      // 岗位
      branchLists() {
        listPost({pageSize: 999}).then(async res => {
          this.branchList = res.list
        })
      },

      // 等级列表
      roleLists() {
        getRoleList({pageSize: 999}).then(async res => {
          this.roleList = res.list
        })
      },

      //复选框内容改变
      getTemplateRow(idx, row) {
        if(this.cUids.indexOf(row.uid) != -1){
          this.cUids.push(row.uid)
        }
        //this.$emit('getTemplateRow', row);
      },


      // 列表
      getList() {
        this.loading = true
        getSendUserList({dayId:this.dayId+''}).then(res=>{
         this.tableData.data = res
          this.tableData.total = res.length
          this.loading = false
        }).catch(res => {
          this.$message.error(res.message)
          this.loading = false
        })
      },
      search() {
        this.loading = true
        userListApi(this.tableFrom).then(res => {
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(res => {
          this.$message.error(res.message)
          this.loading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      },

      resetForm(name) {
        this.$refs[name].resetFields();
        this.getList()
      },

    }
  }
</script>

<style scoped>

</style>
